<template>
  <view class="share grid col-4">
    <view @tap="onShareWxSession">
      <view class="image"><image :src="IMAGES.SHARE_WECHAT"></image></view>
      <view class="text">微信</view>
    </view>
    <view @tap="onShareWxTimeline">
      <view class="image"><image :src="IMAGES.SHARE_WECHAT_FRIENDS"></image></view>
      <view class="text">朋友圈</view>
    </view>
    <!--    <view @tap="onShareQrCode">
      <view class="image"><image src="/static/images/task/task_share05.png" mode=""></image></view>
      <view class="text">二维码</view>
    </view> -->
    <view @tap="onShareQQ">
      <view class="image"><image :src="IMAGES.SHARE_QQ" mode=""></image></view>
      <view class="text">QQ</view>
    </view>
    <view @tap="onShareMore">
      <view class="image"><image :src="IMAGES.SHARE_MESSAGE"></image></view>
      <view class="text">更多方式</view>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
export default {
  name: "share",
  computed: {
    IMAGES: () => IMAGES
  },
  mounted() {
    this.$store.dispatch("setting/getShare");
  },
  methods: {
    // 分享微信聊天界面
    onShareWxSession() {
      // #ifdef APP-PLUS
      uni.share(
        Object.assign(this.$store.state.setting.share.task, {
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          success: res => {
            this.$api.task
              .postShareSuccess()
              .then(_ => {
                uni.$emit("share_success");
                uniApp.toast("分享成功");
              })
              .catch(e => {
                uniApp.alert("分享失败,请重试");
              });
          },
          fail: function(err) {
            uniApp.alert("fail:" + JSON.stringify(err));
          }
        })
      );
      // #endif
    },
    onShareWxTimeline() {
      uni.share(
        Object.assign(this.$store.state.setting.share.task, {
          provider: "weixin",
          scene: "WXSenceTimeline",
          type: 0,
          success: res => {
            this.$api.task
              .postShareSuccess()
              .then(_ => {
                uni.$emit("share_success");
                uniApp.toast("分享成功");
              })
              .catch(e => {
                uniApp.alert("分享失败,请重试");
              });
          },
          fail: function(err) {
            uniApp.alert("fail:" + JSON.stringify(err));
          }
        })
      );
    },
    onShareQQ() {
      // #ifdef APP-PLUS
      uni.share(
        Object.assign(
          this.$store.state.setting.share.task,
          {
            provider: "qq",
            type: 1,
            success: res => {
              this.$api.task
                .postShareSuccess()
                .then(_ => {
                  uni.$emit("share_success");
                  uniApp.toast("分享成功");
                })
                .catch(e => {
                  uniApp.alert("分享失败,请重试");
                });
            },
            fail: function(err) {
              console.warn("fail:" + JSON.stringify(err));
            }
          },
          {
            href: this.$store.state.setting.share.task.href + "?pid=" + this.$store.state.user.userInfo.id
          }
        )
      );
      // #endif
    },
    onShareMore() {
      plus.share.sendWithSystem(
        {
          content: this.$store.state.setting.share.task.title,
          href: this.$store.state.setting.share.task.href + "?pid=" + this.$store.state.user.userInfo.id
        },
        s => {
          this.$api.task
            .postShareSuccess()
            .then(_ => {
              uni.$emit("share_success");
            })
            .catch(e => {
              uniApp.alert("分享失败,请重试");
            });
        },
        () => {
          uniApp.alert("fail:" + JSON.stringify(err));
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.share {
  background-color: #787cd5;
  height: 120upx;
  > view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .image {
      width: 70upx;
      height: 70upx;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
